<!-- flow grid lines -->
<div [style.min-width.px]="pageWidth + 16" style="padding: 1px;"></div>
<div class="flowscreen" [style.min-width.px]="pageWidth + 16" #flowscreen>
    <div class="flow-grid-lines" [style.min-width.px]="pageWidth">
        <!-- wrapper -->
        <div *ngFor="let title of flowGridLines" class="line"></div>
    </div>

    <!-- hosts -->
    <div class="hosts" [style.min-width.px]="pageWidth">
        <!-- host titles -->
        <ng-template ngFor let-itemhost [ngForOf]="aliasTitle">

            <div *ngIf="itemhost && itemhost.empty" style="min-width: 100px;"></div>
            <div *ngIf="itemhost && !itemhost.empty && !itemhost.hidden" matTooltipClass="iptooltip"
                [matTooltip]="_isCombineByAlias ? 
                pipeToString(itemhost) :
                itemhost.IP + (itemhost.PORT ? ':' + itemhost.PORT : '') + ' ( click to copy )'" (click)="openSnackBar(_isCombineByAlias ? 
                pipeToString(itemhost) :
                itemhost.IP + (itemhost.PORT ? ':' + itemhost.PORT : ''))"
                [ngClass]="'item-wrapper' + (isSimplify ? ' big' : '')">
                <!-- wrapper -->

                <div class="item" style="user-select:text; cursor:pointer">
                    <!-- container -->
                    <div *ngIf="itemhost.alias !== itemhost.ip && itemhost.alias !== itemhost.IP && itemhost.alias !== ''"
                        class="itemhost-alias"> {{
                        itemhost.alias === itemhost.ip || itemhost.alias === '' ?
                            itemhost.shortIPtext2 :
                            itemhost.alias
                    }} </div>
                    <!-- <div style="font-size: 0.9em;color: #999">{{(_isSimplifyPort ? 'PORT:' + itemhost.PORT : '')}}</div> -->
                    <div *ngIf="!itemhost.arrip"> {{ itemhost.shortIPtext2 }} </div>
                    <div *ngIf="itemhost.arrip">
                        <div *ngFor="let ip of itemhost.arrip" id="{{ shortcutIPv6String(ip) }}"
                            style="text-align: center;">{{ shortcutIPv6String(ip) }}</div>
                    </div>

                </div>
            </div>
        </ng-template>
    </div>

    <!-- flow packets -->

    <!-- REAL TIME FLOW -->
    <cdk-virtual-scroll-viewport *ngIf="!isExport" [itemSize]="isSimplify ? 44 : 77" minBufferPx="50" maxBufferPx="400"
        class="flow-packets-wrapper" auditTimeInMs="2" [style.min-width.px]="pageWidth + 100" (scroll)="onScroll($event)"
        (mouseover)="setScrollTarget('virtualScroll')" #virtualScroll>
        <app-flow-item *cdkVirtualFor="let item of arrayItems; let idx = index" [item]="item" [idx]="idx"
            [isSimplify]="isSimplify" (click)="onClickItem($event.item, $event.event)">
        </app-flow-item>

        <div style="height: 40px;"></div>
        </cdk-virtual-scroll-viewport>

    <!-- EXPORT FLOW as PNG -->
    <div *ngIf="isExport" class="flow-packets-wrapper" [style.min-width.px]="pageWidth + 100">
        <app-flow-item *ngFor="let item of arrayItems; let idx = index" [item]="item" [idx]="idx" [isSimplify]="isSimplify"
            (click)="onClickItem($event.item, $event.event)">
        </app-flow-item>
        <div style="height: 40px;"></div>
    </div>
    <!-- </div> -->
    <div class="label-callid-container">
        <div class="label-callid-wrapper" *ngFor="let itemLabel of labels" [ngStyle]="{'color': itemLabel.color_sid}"> *
            {{ itemLabel.callid }} </div>
    </div>
</div>


<div id="download" style="display: none;">
    <img #canvas>
    <a #downloadLink></a>
</div>
<div class="virtual-scrollbar" *ngIf="!isExport" (mousedown)="setScrollTarget('virtualScrollbar')"
    (scroll)="onScroll($event)" #virtualScrollbar>
    <div [style.transform]="getVirtualScrollHeight" [style.padding.px]="1"></div>
</div>